<template>
  <div class="info-content info-content-img" :class="{ preHeight: preHeight }">
    <el-image
      class="msg-img chat-preview-img"
      fit="contain"
      :src="url"
      @click.stop="imagePreview(item.messageContent)"
      @load="load"
    ></el-image>
  </div>
</template>

<script>
import ChatMixin from '@src/modules/im/ChatMixin/index.js';

export default {
  name: 'image-message',
  mixins: [ChatMixin],
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      preHeight: true,
    };
  },
  computed:{
    url(){
      return this.compatibleFieldByExt(this.item, 'url')
    }
  },
  methods: {
    imagePreview() {
      this.chatImgPreview(this.url);
    },
    load() {
      this.preHeight = false;
    },
  },
};
</script>

<style scoped lang='scss'>
.info-content-img {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  background-color: #000000 !important;
  cursor: pointer;
  .msg-img {
    min-width: 100px;
    max-width: 140px;
    width: auto;
    height: auto;
    border-radius: 4px;
    max-height: 200px;
    overflow: hidden;
    display: block;
    ::v-deep .el-image__inner{
      min-height: 30px;
    }
  }
}
.preHeight {
  height: 160px !important;
}
</style>